<template>
  <div>
    <Splitpanes>
      <Pane :size="(360 / conWidth) * 100">
        <el-tree
          ref="rptGroupTree"
          :data="rptGroupList"
          show-checkbox
          node-key="id"
          default-expand-all="true"
          :default-checked-keys="checkedRptGroupNodes"
          :props="defaultProps"
          @check-change="checkChange"
        />

        <!-- <div class="mt-4">
          <el-checkbox-group ref="rptGroupTree"  v-model="rptGroupList">
            <el-checkbox label="Option1" border />
            <el-checkbox label="Option2" border />
          </el-checkbox-group>
        </div> -->
      </Pane>
    </Splitpanes>
  </div>
</template>
<script setup lang="ts">
// ==========引入组件区
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';

defineExpose({
  findRptGroupRoles
});
// ==========变量定义区

const { proxy }: any = getCurrentInstance();
// 获取屏幕宽度
let conWidth = ref(document.documentElement.clientWidth);
const defaultProps = reactive({
  children: 'children',
  label: 'rptGroupName'
});
const rptGroupList = reactive([]);
const workGroupList = reactive([]);
let checkedRptGroupNodes = reactive([]);
let roleRptId = ref('');

// ==========方法定义区
onMounted(() => {
  getDictDetailList();
});

//查询搜索报告单元列表
function findrptGroupList() {
  rptGroupList.length = 0;
  const url = '/api/rptGroup/findRptGroupTree';
  proxy.$http
    .get(url)
    .then((res: any) => {
      rptGroupList.push(...res.data);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

//查询搜索报告单元列表
function findRptGroupRoles(roleId: any) {
  checkedRptGroupNodes.length = 0;
  roleRptId.value = roleId;
  const url = '/sys/rolerptgroup/getRptGroupByRoleId/' + roleId;
  proxy.$http
    .get(url)
    .then((res: any) => {
      proxy.$nextTick(() => {
        checkedRptGroupNodes.push(
          ...res.data.map((item) => {
            return item.rptGroupId;
          })
        );
        proxy.$refs.rptGroupTree.setCheckedKeys(checkedRptGroupNodes);
      });
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

//获取字典数据
function getDictDetailList() {
  workGroupList.length = 0;
  const url = '/api/sys/basDictDetail/findDictDetailList';
  proxy.$http
    .get(url, { params: { code: 'JYGZZ' } })
    .then((res: any) => {
      workGroupList.push(...res.data);
      findrptGroupList();
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

// 勾选改变
function checkChange(data, checked) {
  if (checked && data.id) {
    const url = '/sys/rolerptgroup/addRoleRptGroup';
    let obj = {
      roleId: roleRptId.value,
      rptGroupId: data.id
    };
    proxy.$http
      .post(url, obj)
      .then((res: any) => {})
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
  }
  if (!checked && data.id) {
    const url = '/sys/rolerptgroup/deleteRoleRptGroup';
    let obj = {
      roleId: roleRptId.value,
      rptGroupId: data.id
    };
    proxy.$http
      .post(url, obj)
      .then((res: any) => {})
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  margin-top: 10px;
}
</style>
